<template>
  <el-form :disabled="disabled" v-loading="false" :inline="true" class="demo-form-inline">
    <el-form-item label="一级分类">
      <el-select v-model="cate1Id" no-data-text="暂无数据" placeholder="一级分类">
        <el-option v-for="cate1 in categoryStore.cate1List" :key="cate1.id" :label="cate1.name" :value="cate1.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="cate2Id" no-data-text="暂无数据" placeholder="二级分类">
        <el-option v-for="cate2 in categoryStore.cate2List" :key="cate2.id" :label="cate2.name" :value="cate2.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="cate3Id" no-data-text="暂无数据" placeholder="三级分类">
        <el-option v-for="cate3 in categoryStore.cate3List" :key="cate3.id" :label="cate3.name" :value="cate3.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { computed, defineProps, onMounted, ref } from 'vue'
import { reqGetCategory1, reqGetCategory2, reqGetCategory3 } from '@/api/product/category'
import type { categoryListModel, cateIdModel } from '@/api/product/model/category'
import { useCategoryStore } from '@/stores/category'

export default {
  name: 'CategorySelector',
}
</script>

<script lang="ts" setup>
defineProps({
  disabled: {
    default: false,
    type: Boolean
  }
})
// 使用 pinia 中的分类数据
const categoryStore = useCategoryStore()

// 定义一级分类的 getter/setter
const cate1Id = computed<number>({
  get() {
    return categoryStore.cate1Id as number
  },
  set(val) {
    categoryStore.setCategory2List(val)
  }
})
// 定义二级分类的 getter/setter
const cate2Id = computed<number>({
  get() {
    return categoryStore.cate2Id as number
  },
  set(val) {
    categoryStore.setCategory3List(val)
  }
})
// 定义三级分类的 getter/setter
const cate3Id = computed<number>({
  get() {
    return categoryStore.cate3Id as number
  },
  set(val) {
    categoryStore.setCate3Id(val)
  }
})

// 初始化获取一级分类列表显示
onMounted(() => {
  categoryStore.setCategory1List()
})

</script>

<style lang="scss" scoped>

</style>